import { useState } from 'react'
import { useRoutes, useNavigate, useLocation } from 'react-router-dom';
import router from './router';
import { UserOutlined, SmileOutlined } from '@ant-design/icons';
import Login from "pages/login";
import user from "utils/user";
import type { MenuProps } from 'antd';
import { Menu, Layout, Avatar, Dropdown, Space } from 'antd';
const { Header, Content } = Layout;

import './App.scss';
/**获取菜单列表 */
const getMenu = (menu:any) => {
  //判断label，有是菜单
  return menu.filter((item: any)=> item.label).map((item: any) => {
    if(item.children) {
      return {
        ...item,
        key: item.path,
        children: getMenu(item.children),
      };
    }
    return {...item, key: item.path}
  })
}
const App = () => {
  let location = useLocation();
  console.log(location.pathname.slice(1).split('/'), 'location...');
  const navigate = useNavigate();
  const element = useRoutes(router);
  const onClick = (e: any) => {
    navigate(e.keyPath.reverse().join("/"));
  }
  const menuClick: MenuProps['onClick'] = ({key}) => {
    if (key === '2') {
      user.clear();
      navigate("/login")
    } else if (key === '1') {
      router.push("/my");
    }
  }
  // if (user.get() === null) {
  //   return <Login/>
  // }
  const menu = (
      <Menu
          onClick={menuClick}
          items={[
            {
              key: '2',
              label: '退出登陆',
              icon: <SmileOutlined />,
            }
          ]}
      />
  );
  return (<Layout className="layout" style={{
    backgroundImage: 'url("home.png")'
  }}>
    <Header className="head">
      <Menu
          className="menu"
          mode="horizontal"
          selectedKeys={location.pathname.slice(1).split('/')}
          onClick={onClick}
          items={getMenu(router)}
      />
      <Dropdown overlay={menu}>
        <Space style={{height: '100%', width: '7%', textAlign: 'center', marginRight: '10px'}}>
          <Avatar icon={<UserOutlined />}/>
          <span>{user.get()}</span>
        </Space>
      </Dropdown>
    </Header>
    <Content style={{ height: '90%'}}>
      {element}
    </Content>
  </Layout>);
}

export default App
